/*
描述：最近问题展示组件，用于在侧边栏显示最新的5个问题，包括问题标题和创建时间
完成人：何艺珲
完成时间: 2025/04/26
*/


<script lang="ts">
  export default {
    name: 'RecentQuestion'
  }
</script>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import axios from "axios";
import { useRouter} from 'vue-router';
import {Calendar} from "@element-plus/icons-vue";
const router = useRouter();
interface Question {
  id: number;
  title: string;
  content: string;
  img: string;
  createtime: string;
  updatetime?: string;
  user_id: number;
  like: number;
  answercount?: number;
  username?: string;
  avatar?: string;
}

const questions = ref<Question[]>([]);
// 格式化日期函数
const formatDate = (dateString: string): string => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};
const fetchQuestions = async (): Promise<void> => {
  const response = await axios.post('http://localhost:8089/question/getQuestionList', {
    id: '',
    title: '',
    content: '',
    img: '',
    createtime: '',
    updatetime: '',
    user_id: '',
    like:'',
    answercount:''
  }, {
    headers: {
      'Content-Type': 'application/json',
      'Accept': '*/*'
    }
  });

  if (response.data && response.data.code === 1) {
    // 处理返回的数据，确保符合Question接口
    const allQuestions = response.data.data.map((item: any) => ({
      ...item,
    }));

    // 按照id降序排序（假设id越大表示越新）
    allQuestions.sort((a: Question, b: Question) => b.id - a.id);

    // 只保留前5个问题
    questions.value = allQuestions.slice(0, 5);
  }
}
onMounted(() => {
  fetchQuestions();
});
const goQuestionDetailView = (questionId: number) => router.push({
  path: '/question',
  query: { id: questionId }
});
</script>
<template>
  <div class="recent-articles">
    <h2 class="section-title">最近文章</h2>
    <div class="article-list">
      <div v-for="(question, index) in questions" :key="index" class="article-item">
        <div class="date">
          <span class="icon"> <el-icon><Calendar /></el-icon></span>
          <span>{{ formatDate(question.createtime).toUpperCase() }}</span>
        </div>
        <p class="article-title" @click="goQuestionDetailView(question.id)">{{ question.title }}</p>
      </div>
    </div>
  </div>
</template>
<style scoped>
.recent-articles {
  max-width: 350px;
  width: 100%;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  font-family: Arial, sans-serif;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #666;
  margin-bottom: 20px;
}

.article-list {
  display: flex;
  flex-direction: column;
  gap: 15px;

}

.article-item {
  background-color: #fff;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.date {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #888;
  margin-bottom: 5px;
}

.icon {
  font-size: 14px;
}

.article-title {
  font-size: 16px;
  font-weight: 500;

  margin: 0;
  line-height: 1.4;
}

.article-title:hover {
  color: #007bff;
}
</style>
